<template>
    <view class="recycle_order_detail-container">
        <!-- Header -->
        <view class="recycle_order_detail-header">
            <!-- 订单取消 -->
            <template v-if="status == 4 && orderInfo.test_status != 2">
                <view class="recycle_order-close">{{ getOrderStatusTxt(status) }}</view>
            </template>
            <template v-else>
                <!-- 回收流程状态 -->
                <view class="recycle-process">
                    <block v-for="(item, index) in steps">
                        <view class="recycle-process-item">
                            <!-- Icon -->
                            <view class="recycle-process-icon">
                                <template v-if="(index <= status || status == 3)">
									<view class="recycle-process-icon--success"></view>
                                </template>
                                <template v-else>
                                    <view class="recycle-process-icon--inaction"></view>
                                </template>
                            </view>
                            <!-- Name -->
                            <view class="recycle-process-name" :style="{color: (index <= status || status == 3) ? '#000000' : '#999999'}">{{ item }}</view>
                        </view>
                    </block>
                    
                    <!-- Process line -->
                    <view class="recycle-process-line" 
                      :style="{
                          left: `calc(100% / ${steps.length} / 2)`, 
                          width: `calc(100% / ${steps.length} * ${steps.length - 1})`
                      }"
                    >
                        <view class="recycle-process-line--active" 
                          :style="{width: `calc(100% / ${steps.length - 1} * ${status + 1})`}"
                        />
                        <view class="recycle-process-line--inaction" />
                    </view>
                </view>
                
                <!-- 订单状态信息 -->
                <view>
                    <!-- 订单状态 -->
                    <view class="order-status">
                        <view class="lg normal">
                            <template v-if="status == 2 && orderInfo.test_status == 2">
                                <text>已拒绝</text>
                                <text class="ornament sm ml20">实物不符</text>
                            </template>
                            <template v-else>
                                <text>{{ getOrderStatusTxt(status) }}</text>
                            </template>
                        </view>
                        <template v-if="status == 0">
                            <view class="ornament nr">
                                <u-count-down 
                                  :timestamp="getCountdown(orderInfo.create_time, orderInfo.order_end_time)" 
                                  :show-days="false" 
                                  color="#FF2C3C" 
                                  separator-color="#FF2C3C"
                                  @end="handleCloseOrder"
                                />
                            </view>
                        </template>
                    </view>
                    <!-- 物流信息 -->
                    <view class="order-logistics">
                        <!-- 未寄出 -->
                        <template v-if="status == 0">
                            <view class="order-logistics-item">
                                <view class="nr muted" style="min-width: 146rpx">收件地址</view>
                                <view class="normal">
                                    <view class="row nr">
                                        <view>{{ orderInfo.palt.user_name }}</view>
                                        <view class="ml10">{{ orderInfo.palt.user_mobile }}</view>
                                        <view class="ml20 primary" @tap="copyReceiveAddress">复制</view>
                                    </view>
                                    <view class="sm mt10">{{ orderInfo.palt.user_address }}</view>
                                </view>
                            </view>
                        </template>
                        <!-- 已寄出 -->
                        <template v-else>
                            <view class="order-logistics-item">
                                <view class="nr muted" style="min-width: 146rpx">寄件地址</view>
                                <view class="normal">
                                    <view class="row nr">
                                        <view>{{ orderInfo.user_info.name }}</view>
                                        <view class="ml10">{{ orderInfo.user_info.mobile }}</view>
                                    </view>
                                    <view class="sm mt10">{{ orderInfo.user_info.address }}</view>
                                </view>
                            </view>
                            <view class="order-logistics-item">
                                <view class="nr muted" style="min-width: 146rpx">收件地址</view>
                                <view class="normal">
                                    <view class="row nr">
                                        <view>{{ orderInfo.palt.user_name }}</view>
                                        <view class="ml10">{{ orderInfo.palt.user_mobile }}</view>
                                    </view>
                                    <view class="sm mt10">{{ orderInfo.palt.user_address }}</view>
                                </view>
                            </view>
                            <view class="order-logistics-item">
                                <view class="nr muted" style="min-width: 146rpx">快递单号</view>
                                <view class="normal">
                                    <view class="nr">{{ orderInfo.send_snap.shipping_name }}</view>
                                    <view class="sm mt10 row" @tap="copyExpressCode">
                                        <text>{{ orderInfo.send_snap.invoice_no }}</text>
                                        <u-icon class="ml10" name="file-text" color="#707070" />
                                    </view>
                                </view>
                            </view>
                        </template>
                    </view>
                </view>
            </template>
        </view>
       
        
        <!-- Main -->
        <view>
            <view class="order-goods mt20 normal">
                <view class="lg">评估情况</view>
                <view class="row-between mt20 mb20" @tap="goGoods(orderInfo.id)">
                    <u-image width="160" height="160" :src="orderInfo.goods_image" />
                    <view class="order-goods-info">
                        <view class="md line1" style="width: calc(100% - 20rpx - 32rpx);">{{ orderInfo.goods_name }}</view>
                        <view class="line1 xs muted mt20" style="width: calc(100% - 20rpx - 32rpx);">{{ orderInfo.item }}</view>
                    </view>
                    <u-icon name="arrow-right" color="#707070" />
                </view>
                <view class="order-goods-price">
                    <view class="row-between">
                        <text class="sm muted">预估价</text>
						<view>
							<text class="xs">¥</text>
							<text class="xxl">{{ orderInfo.total_amount }}</text>							
						</view>
                    </view>
                    <template v-if="status >= 2">
                        <view class="row-between">
							<text class="sm muted">质检价</text>								
							<view @tap="isQCPricePopup = true">
								<u-icon class="mr5" name="question-circle" color="#999999" />
								<text class="xs ornament">¥</text>
								<text class="xxl ornament">{{ orderInfo.order_amount }}</text>								
							</view>
                        </view>
                    </template>
                </view>
            </view>
        </view>
        
        <!-- footer -->
        <view>
            <view class="order-info mt20 nr black">
                <view class="row">
                    <view class="muted mr30">收款方式</view>
                    <view class="">{{ orderInfo.collection }}</view>
                </view>
                <view class="row mt20">
                    <view class="muted mr30">订单编号</view>
                    <view>
                        <text>{{ orderInfo.order_sn }}</text> 
                        <text class="primary ml20" @tap="copyOrderCode">复制</text>
                    </view>
                </view>
                <view class="row mt20">
                    <view class="muted mr30">下单时间</view>
                    <view>{{ orderInfo.create_time_desc }}</view>
                </view>
            </view>
        </view>
        
        <!-- Widget -->
        <view>
            <!-- 底部按钮 -->
            <template v-if="status != 3 && status != 4 && orderInfo.test_status != 2">
                <view class="recycle-order-widget">
					<template v-if="orderInfo.rent_status == 0">
						<view class="widget-btn--unactive mr20" @tap="isCloseOrderModal = true">取消订单</view>
					</template>
					
                    <template v-if="status == 0">
                        <view class="widget-btn--active" @tap="goEditLogistics">填写单号</view>
                    </template>
					
					<template v-if="status == 1">
					    <view class="widget-btn--normal" @tap="goExpressProgress">查看物流</view>
					</template>
					
                    <template v-if="status == 2">
						<view class="widget-btn--normal mr20" @tap="isDealModal = true">确认回收</view>	
                    </template>
                </view>
            </template>
			
			<!-- 联系客服 -->
			<view class="button--server" @tap="onContactServe">
				<u-icon name="server-fill" />
			</view>
            
            <!-- 质检价的温馨提示Propup -->
            <u-popup v-model="isQCPricePopup" mode="center" :closeable="true">
            	<view class="qc-tips-popup">
                    <view class="row-center xxl normal">温馨提示</view>
                    <view class="lg normal mt30" style="line-height: 1.5em;">
                        <text style="font-weight: 500;">质检价：</text>
                        <text>
                            是根据您的手机情况而得出的实际价格，与预估的价格有些差距，可能是因为手机外观、屏幕损坏、运行顺畅等原因有关；
                            如在可接受价格的范围内，请点击确认继续以下操作
                        </text>
                    </view>
                    <view class="qc-tips-popup-button mt30" @tap="isQCPricePopup = false">好的，我知道了</view>
                </view>
            </u-popup>
			
			<!-- 换租 -->
			<u-popup v-model="showLendLeasePopup" mode="center" border-radius="20">
				<view class="lend_lease">
					<view class="lend_lease-title">温馨提示</view>
					<view class="lend_lease-info-item">
						<view class="nr normal">质检价</view>
						<view class="row">
							<view class="xs line-through muted mr20">预估价 ¥{{ orderInfo.total_amount }}</view>
							<view class="lg">¥{{ orderInfo.order_amount }}</view>
						</view>
					</view>
					<view class="lend_lease-info-item">
						<view class="nr normal">可收入</view>
						<view class="xxl">¥{{ orderInfo.order_amount }}</view>
					</view>
					<view class="lend_lease-widget">
						<view class="lend_lease-cancel" @tap="showLendLeasePopup = false">取消</view>
						<view class="lend_lease-confirm" @tap="goLendLease">确认</view>
					</view>
				</view>
			</u-popup>
            
            
            <!-- 订单取消 Modal -->
            <u-modal 
              v-model="isCloseOrderModal" 
              :show-cancel-button="true" 
              content="取消订单"
              :show-title="false"
              @confirm="onOrderClose" 
            />
            
            <!-- 确认交易 Modal -->
            <u-modal 
              v-model="isDealModal" 
              :show-cancel-button="true" 
              content="确认交易"
              :show-title="false"
              @confirm="confirmDeal" 
            />
        </view>
    </view>
</template>


<script>
    import { 
        getOrderDetail,
        postOrderClose,
        postConfirmDeal
    } from '@/api/recycle.js';
	
	import { copy } from '@/utils/tools'
    
    export default {
        data() {
            return {
                // 回收流程
                steps: [
                    '已下单', 
                    '待寄出', 
                    '待质检', 
                    '待确认', 
                    '已完成'
                ],
                status: 0,                  // 当前订单状态
                isQCPricePopup: false,      // 质检价温馨提示的弹出弹出层
				showLendLeasePopup: false,	// 换租Popup
                isCloseOrderModal: false,   // 取消订单的模态窗口
                isDealModal: false,         // 确认交易的模态窗口
                orderInfo: {},              // 订单数据
                payload: null,              // 承载URL传入的参数
            }
        },
        methods: {
            // 获取订单当前状态信息文本
            getOrderStatusTxt(status) {
                switch(status) {
                    case 0: return '下单成功，等待寄出';
                    case 1: return '已寄出，等待质检';
                    case 2: return '已质检，等待确认';
                    case 3: return '已完成';
                    case 4: return '已取消订单';
                }
            },
            
            // 待寄出倒计时
            getCountdown(timestamp, hour) {
                const countDown = hour * 60 * 60;
                const end = timestamp + countDown;
                const now = new Date().getTime() / 1000;
                return end - now;
            },
            
            // 复制收件地址
            copyReceiveAddress() {
                const data = this.orderInfo.palt;
				const content = `收件人:${ data.user_name } 联系方式:${ data.user_mobile } 收件地址:${ data.user_address }`;
				copy(content);
            },
            
            // 复制订单编号
            copyOrderCode() {
				copy(this.orderInfo.order_sn)
            },
            
            // 复制物流单号
            copyExpressCode() {
				copy(this.orderInfo.send_snap.invoice_no)
            },
            
            // 跳转商品评估信息
            goGoods(id) {
                uni.navigateTo({
                    url: '/bundle/pages/recycle_goods_detail/recycle_goods_detail'
                      + '?id=' + id
                })
            },
			
			// 跳转到换租详情
			goLeaseOrderDetail() {
				uni.navigateTo({
				    url: '/bundle/pages/lease_order_detail/lease_order_detail'
				      + '?id=' + this.orderInfo.lease_order_id
				})
			},
            
            // 跳转填写订单号
            goEditLogistics() {
                uni.navigateTo({
                    url: '/bundle/pages/recycle_logistics_form/recycle_logistics_form'
                      + '?id=' + this.orderInfo.id
                })
            },
			
			// 查看物流
			goExpressProgress() {
				uni.navigateTo({
				    url: '/bundle/pages/recycle_express_progress/recycle_express_progress'
				      + '?id=' + this.orderInfo.id
				})
			},
			
			// 跳转换租
			goLendLease() {
				this.showLendLeasePopup = false;
				uni.navigateTo({
				    url: '/bundle/pages/lendlease_periods/lendlease_periods'
				      + '?id=' + this.orderInfo.id
				})
			},
            
            // 点击订单取消按钮
            onOrderClose() {
                const id = this.orderInfo.id;
                postOrderClose({ ro_id: id }).then(res => {
                    if (res.code != 1) return;
                    uni.showToast({ title: '订单已取消' });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 500);
                });
            },
			
			// 点击联系客服
			onContactServe() {
				uni.navigateTo({
					url: '/bundle/pages/contact_offical/contact_offical'
				})
			},
            
            // 确认交易
            confirmDeal() {
                const id = this.orderInfo.id;
 
                postConfirmDeal({ ro_id: id }).then(res => {
                    if (res.code != 1) return;
                    uni.showToast({ title: '交易成功' });
                    setTimeout(() => {
                        uni.redirectTo({
                            url: './recycle_order_detail?id=' + id
                        })
                    }, 500);
                });
            }
        },
        
        onLoad(options) {
            this.payload = options;
        },
        
        onShow() {
            const id = this.payload.id;
            // 请求订单详情数据
            getOrderDetail({ ro_id: id }).then(res => {
                const data = res.data;
                this.orderInfo = res.data;
                this.status = data.order_status;
            });
        }
    }
</script>


<style scoped>
    .recycle_order_detail-container {
        margin: 20rpx;
        padding-bottom: 100rpx;
    }
    
    .recycle_order_detail-header {
        padding: 30rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
    }
    
    .recycle_order-close {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
    }
    
    .recycle-process {
        padding: 30rpx 0;
        position: relative;
        display: flex;
    }
    
    .recycle-process-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .recycle-process-icon {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40rpx;
        padding: 0 10rpx;
        background-color: #FFFFFF;
    }
    
    .recycle-process-name {
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #999999;
    }
	
	.recycle-process-icon--success {
		width: 40rpx;
		height: 40rpx;
		background: url(../../static/images/logistics_success.png) no-repeat;
		background-size: 100% 100%;
	}
    
    .recycle-process-icon--inaction {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #D7D7D7;
    }
    
    .recycle-process-line {
        position: absolute;
        height: 40rpx;
        overflow: hidden;
    }
    
    .recycle-process-line--active,
    .recycle-process-line--inaction {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        height: 4rpx;
        width: 100%;
    }
    
    .recycle-process-line--active {
        z-index: 2;
        width: 80%;
        background-color: #FF2C3C;
    }
    
    .recycle-process-line--inaction {
        z-index: 1;
        background-color: #D7D7D7;
    }
    
    
    /* Order Status */
    .order-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
    }
    
    .order-logistics-item {
        display: flex;
        margin-top: 30rpx;
    }
    
    
    .order-goods {
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
    }
    
    .order-goods-info {
        box-sizing: border-box;
        width: 100%; 
        padding: 0 20rpx; 
        overflow: hidden; 
    }
    
    .order-goods-price {
/*        display: flex;
        align-items: center;
        justify-content: space-between; */
        padding-top: 20rpx;
        border-top: 1rpx solid #E5E5E5;
    }
    
    .order-goods-price-line {
        width: 200rpx;
        border: 1rpx dashed #24A3FF;
    }
    
    .order-info {
        padding: 30rpx 20rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
    }
    
    
    .recycle-order-widget {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 20rpx;
        background-color: #FFFFFF;
        box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    }
    
    .widget-btn--unactive,
    .widget-btn--active,
	.widget-btn--normal {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 188rpx;
        height: 68rpx;
        border-radius: 50px;
        font-size: 28rpx;
    }
    
    .widget-btn--unactive {
		box-shadow: 0 0 0 1px #D7D7D7;
        color: #666666;
    }
    
    .widget-btn--active {
        background-color: #24A3FF;
        color: #FFFFFF;
    }
	
	.widget-btn--normal {
		box-shadow: 0 0 0 1px #24A3FF;
		color: #24A3FF;
	}
    
    .qc-tips-popup {
        width: 640rpx;
        padding: 30rpx 50rpx;
        border-radius: 10px;
        background-color: #FFFFFF;
    }
    
    .qc-tips-popup-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 74rpx;
        font-size: 32rpx;
        border-radius: 50px;
        background-color: #24A3FF;
        color: #FFFFFF;
    }
	
	.button--server {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 42rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #FFFFFF;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, .3);
	}
	
	
	.lend_lease {
		width: 640rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
	}
	
	.lend_lease-title {
		padding-bottom: 30rpx;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #333333;
	}
	
	.lend_lease-widget {
		display: flex;
		justify-content: space-between;
		margin-top: 84rpx;
	}
	
	.lend_lease-cancel,
	.lend_lease-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 268rpx;
		height: 74rpx;
		font-size: 32rpx;
		border-radius: 50px;
	}
	
	.lend_lease-cancel {
		background-color: #F6F6F6;
		color: #666666;
	}
	
	.lend_lease-confirm {
		background-color: #24A3FF;
		color: #FFFFFF;
	}
	
	.lend_lease-info-item {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
</style>
